<template>
  <div>
    <a-card :bordered="false" style="padding: 0">
      <span slot="title">
        <span>每日汇率 <span class="tip">工作日每天上午九点半更新数据，非工作日没有数据</span></span>
      </span>
      <a slot="extra" href="#">
        <j-date placeholder="请选择日期" :allowClear="false" v-model="queryParam.dayTime" :disabled-date="disabledDate" @change="selectDate"></j-date>
      </a>
     <div class="empty" v-if="dataSource && dataSource.length ==0">
        <a-empty />
      </div>
      <div v-else>
        <a-spin :spinning="spinning">
      <a-col :sm="24" :md="24" :xl="8">
        <div class="rank">
          <ul class="list" :style="{ height: 'auto', overflow: 'auto' }">
            <li :key="index" v-for="(item, index) in firstDataSource">
              <span>{{ index + 1 }}</span>
              <span>{{ item.name }}/人民币</span>
              <span>{{ item.zhesuan }}</span>
            </li>
          </ul>
        </div>
      </a-col>
      <a-col :sm="24" :md="24" :xl="8">
        <div class="rank">
          <ul class="list" :style="{ height: 'auto', overflow: 'auto' }">
            <li :key="index" v-for="(item, index) in secondDataSource">
              <span>{{ index + 1 }}</span>
              <span>{{ item.name }}/人民币</span>
              <span>{{ item.zhesuan }}</span>
            </li>
          </ul>
        </div>
      </a-col>
      <a-col :sm="24" :md="24" :xl="8">
        <div class="rank">
          <ul class="list" :style="{ height: 'auto', overflow: 'auto' }">
            <li :key="index" v-for="(item, index) in thirdlyDataSource">
              <span>{{ index + 1 }}</span>
              <span>{{ item.name }}/人民币</span>
              <span>{{ item.zhesuan }}</span>
            </li>
          </ul>
        </div>
      </a-col>
      </a-spin>
      </div>

    </a-card>
  </div>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import moment from 'moment'
import { getAction } from '@api/manage'
export default {
  name: 'CommonCurrency',
  mixins: [mixinDevice],
  data() {
    return {
      queryParam: {
        dayTime:'',
        },
      dataSource:null,
      firstDataSource: [],
      secondDataSource: [],
     thirdlyDataSource: [],
      spinning:false,
      url: {
        list: '/common/commonCurrency/list',
      },
    }
  },
    created() {
     this.initData()
  },

  methods: {
      moment,
      //设置禁选日期
      disabledDate(current) {
        let startTime = moment('2023-02-06');
        return (current < startTime || current > moment().endOf("day")) || ((moment(current).format('d') == 6||moment(current).format('d') == 0 ))
    },
    //初始数据
      initData() {
         //判断当前日期是周六周日的情况
          let timeNow = new Date()
          let weekOfday = moment(timeNow).format('E');
          let Friday = moment(timeNow).subtract(weekOfday - 5, 'days').format('YYYY-MM-DD');
          console.log('当前日期：'+moment().format('YYYY-MM-DD'))
         if (moment().format('d') == 6||moment().format('d') == 0 ) {
           this.queryParam.dayTime = Friday
         } else {
           this.queryParam.dayTime = moment().format('YYYY-MM-DD')
         }
         this.loadData()
    },
    //选择数据
    selectDate() {
      this.loadData()
    },
      //加载数据
    loadData() {
      var params = {
        pageNo: 1,
        pageSize: 999,
        dayTime: this.queryParam.dayTime,
      }
      //this.spinning = true
      // getAction(this.url.list, params)
      //   .then((res) => {
      //       if (res.success) {
      //        this.dataSource=[]
      //        this.dataSource = res.result.records || res.result
      //         if (this.dataSource.length > 0) {
      //             this.firstDataSource = this.dataSource.slice(0, 8)
      //             this.secondDataSource = this.dataSource.slice(8, 16)
      //             this.thirdlyDataSource = this.dataSource.slice(-8)
      //         }
      //       } else {
      //       this.dataSource=[]
      //       this.$message.warning(res.message)
      //     }
      //   })
      //   .finally(() => {
      //     this.spinning = false
      //   })
    },
    },
}
</script>
<style scoped>
.tip{
  font-size: 12px;
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.45);
}
/deep/.ant-card-extra {
  padding: 13px 0;
}
/deep/.ant-card-head-title {
  padding: 13px 0;
}
/deep/.ant-card-body {
  padding: 0;
}
.empty{
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<style lang="less" scoped>
.rank {
  // padding: 0 32px 32px 72px;

  .list {
    //   margin: 25px 0 0;
    padding: 0;
    list-style: none;

    li {
      margin-top: 16px;

      span {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 22px;

        &:first-child {
          background-color: #f5f5f5;
          border-radius: 20px;
          display: inline-block;
          font-size: 12px;
          font-weight: 600;
          margin-right: 24px;
          height: 20px;
          line-height: 20px;
          width: 20px;
          text-align: center;
        }
        &.active {
          background-color: #314659;
          color: #fff;
        }
        &:last-child {
          float: right;
        }
      }
    }
  }
}

.mobile .rank {
  padding: 0 32px 32px 32px;
}
</style>